<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>教师端页面</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }

        .container{
            width: 1300px;
            height: 600px;
            margin: 20px auto;
            position: relative;
        }

        .header_hea{
            width: 100%;
            line-height: 50px;
            font-size: 21px;
            padding-left: 30px;
            color: forestgreen;
        }

        .header_hea a{
            text-decoration: none;
            color: orangered;
            position: relative;
        }

        /*    做一个伪类边框*/
        .header_hea:before{
            content: '';
            height: 44px;
            left: 0;
            right: 0;
            border: 3px dashed dodgerblue;
            position: absolute;
        }

        /*    中部*/
        .main_mat{
            width: 100%;
            height: 550px;
        }

        .mat_left{
            width: 20%;
            height: 550px;
            float: left;
            text-align: center;
        }

        .mat_left a{
            text-decoration: none;
            color: dodgerblue;
            font-size: 21px;
            line-height: 70px;
            position: relative;
            display: block;
        }

        .mat_left:before{
            content: '';
            height: 550px;
            left: 0;
            right: 80%;
            border-left: 3px dashed dodgerblue;
            border-right: 3px dashed dodgerblue;
            border-bottom: 3px dashed dodgerblue;
            position: absolute;
        }

        .mat_right{
            width: 80%;
            height: 550px;
            float: right;
        }

        .mat_right:before{
            content: '';
            height: 550px;
            left: 20%;
            right: 0;
            border-right: 3px dashed dodgerblue;
            border-bottom: 3px dashed dodgerblue;
            position: absolute;
        }

        .mat_list{
            width: 80%;
            overflow: hidden;
            margin: 20px auto;
            position: relative;
        }
        .mat_list label{
            width: 26.666%;
            display: inline-block;
            line-height: 45px;
            font-size: 18px;

        }

        /*    表*/
        .mat_border{
            width: 82%;
            overflow: hidden;
            margin: 20px auto;
            position: relative;
            text-align: center;
        }
        .mat_border label{
            width: 24%;
            display: inline-block;
            line-height: 65px;
            font-size: 15px;
            color: white;
            font-weight: bold;
            background-color: #ffa07a;
            margin: 4px 0;
        }

        /*    分页*/
        .ol_li{
            width: 82%;
            position: relative;
            margin: 0 auto;
            overflow: hidden;
        }
        .ol_li li{
            width: 40px;
            height: 35px;
            text-align: center;
            border: 1px rebeccapurple solid;
            border-radius: 20%;
            list-style: none;
            cursor: pointer;
            margin: 0 10px;
            float: left;
        }
        .ol_li a{
            text-decoration: none;
            display: inline-block;
            width: 40px;
            line-height: 35px;
        }

        /*    背景颜色样式*/
        .default{
            background-color: aquamarine;
            color: white;
            border-radius: 20%;
        }

        .pore{
            width: 80%;
            margin: 30px auto;
            overflow: hidden;
            position: relative;
        }

        .select{
            width: 200px;
            padding: 7px 0;

        }
    </style>
</head>
<body>
<!--大区域-->
<div class="container">
    <!--    头部区域-->
    <div class="header_hea">
        欢迎学号/工号：<%= uid %>用户，使用学生管理系统发，当前您的职务是：<%= pname%>&nbsp;【<a href="/logout">退出登录</a>】
    </div>

    <!--    中部区域-->
    <div class="main_mat">
        <div class="mat_left">
            <a href="/home_teach">查询学生登录日志</a>
            <a href="/sel_scores">查询专业学生成绩</a>
            <a href="/add_scores">录入专业学生成绩</a>
            <a href="/sel_list">查询专业学生信息</a>
            <a href="/add_list">录入专业学生信息</a>
        </div>
        <!--        右边显示区域-->
        <div class="mat_right">

            <div class="pore">
                <label>请选择录入学期：</label>
                <!--            显示-->
                <select name="nums" class="select" onchange="postnum(this.value)">
                    <option disabled="disabled" selected="selected">请选择</option>
                    <option value="1">第一个学期成绩</option>
                    <option value="2">第二个学期成绩</option>
                    <option value="3">第三个学期成绩</option>
                    <option value="4">第四个学期成绩</option>
                    <option value="5">第五个学期成绩</option>
                </select>

                <div style="display: block; margin-top: 15px;">
                    <label>请选择录入课程：</label>
                    <!--            显示-->
                    <select name="numid" class="select" id="sels" onchange="postnumid(this.value)">
                    </select>
                </div>

                <!--                显示成绩区域-->
                <form method="post" action="/add_scores/add" enctype="application/x-www-form-urlencoded">
                <table border="1" id="tabs" cellpadding="0" cellspacing="0" style="width: 100%;margin: 30px auto;border: 1px aqua solid">


                </table>
                    <input type="submit" style="width: 100%; background-color: aquamarine; color: white;display: block;line-height: 30px;border: 1px solid aquamarine;cursor: pointer;" value="录入" id="subinp" />
                </form>
            </div>

        </div>
    </div>
</div>
</body>
</html>
<script src="./jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
<!--  是同一个全局变量接受当前的学期num  -->
  var numid = 0;
    <!--    将当前点击的下拉菜单的value值传递出去-->
    function postnum(val){
        //将学期num 赋值给全局变量的num
        numid = val;
        //console.log(val)
//    将获取到的value值，作为ajax的参数以post的提交方式传递给模块sel_scores
//    ajax提交的数据获取的方式有两种，  一种是参数获取， 第二种是bodyParser中间件获取
        $.post({
            url : '/add_scores/sel_class',
            dataType : 'json',
            data : { nums : val },
            //    成功之后回调这个函数
            success : function(test){
                //字符串拼接tr
                console.log(test)
                var cn = '';
                cn += '<option disabled="disabled" selected="selected">请选择</option>';
                //    将str字符串添加到table标签当中
                test.forEach( (item)=>{
                    cn += '<option value="'+item.id+'">'+item.class_name+'</option>';
                } )
                // console.log(str)
                // if(str === ''){
                //     document.getElementById('tabs').style.display = 'none';
                // }
                $('#sels').html( cn )
            }
        })
    }

//    发送课程请求
    function postnumid( val ){
        $.post({
            url: '/add_scores/sel_name',
            dataType: 'json',
            data: { numid : numid , id : val },
            success : function ( name ){
                //console.log(name)
                var str = '';
                if(name.length == 0){
                    str += '<tr align="center" >'
                    str += '<td style="padding: 8px 0;">所有学生成绩已经录入完成</td>'
                    str += '</tr>'
                //    将录入按钮隐藏
                    document.getElementById('subinp').style.display = 'none';
                }else {
                    str += '<tr align="center" >'
                    str += '<th style="padding: 8px 0;">学号</th>'
                    str += '<th style="padding: 8px 0;">姓名</th>'
                    str += '<th style="padding: 8px 0;">成绩</th>'

                    str += '</tr>'

                    //将test的第一个下表循环出他的学号和名字  录入成绩需要该学生的学号  所以这里给他做一个隐藏框
                    name.forEach( (item)=>{
                        str += '<tr align="center" >'
                        str += '<td style="padding: 8px 0;">'+item.uid+'<input type="hidden" name="uid" value="'+item.uid+'" /></td>'
                        str += '<td style="padding: 8px 0;">'+item.stu_name+'</td>'
                        //循环每门课从成绩
                        str += '<td style="padding: 8px 0;"><input type="number" max="100" value="0" name="scores" style="outline: none;padding: 8px 0px 8px 8px;width: 98%;border: 0px;background-color: white;" /><input type="hidden" name="classid" value="'+val+'" /></td>'
                        str += '</tr>'
                    } )
                    //    将录入按钮显示
                    // document.getElementById('subinp').style.display = 'block';
                    $('#subinp').show();
                }

                $('#tabs').html( str )
            }
        })
    }
</script>
